<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <th:block th:replace="~{/_include/header}" />
    <title th:text="${entityLabel}"></title>
    <style>
      .dataTables_wrapper .rb-datatable-header,
      .dataTables_wrapper .rb-datatable-header.header-fixed {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: #f5f5f5;
        z-index: 10;
      }
      #react-list {
        margin-top: 60px;
        margin-bottom: 0;
      }
      .rb-datatable-body,
      .rb-datatable-body .rb-scroller,
      .rb-datatable-body .rb-loading {
        min-height: 437px;
      }
      .list-nodata {
        padding-top: 155px;
      }
      .dataTables_wrapper .paging_sizes-no {
        display: none;
      }
    </style>
  </head>
  <body class="dialog">
    <div class="main-content container-fluid p-0">
      <div class="card card-table">
        <div class="card-body">
          <div class="dataTables_wrapper container-fluid">
            <div class="row rb-datatable-header">
              <div class="col-6">
                <div class="dataTables_filter">
                  <div class="input-group input-search" style="width: 227px">
                    <input class="form-control" type="text" th:placeholder="${quickFieldsLabel ?:bundle.L('快速查询')}" th:title="${quickFieldsLabel}" />
                    <span class="input-group-btn">
                      <button class="btn btn-secondary" type="button"><i class="icon zmdi zmdi-search"></i></button>
                    </span>
                  </div>
                </div>
              </div>
              <div class="col-6">
                <div class="dataTables_oper">
                  <button class="btn btn-space btn-primary btn-outline J_select" type="button"><i class="icon zmdi zmdi-check"></i> [[${bundle.L('选择')}]]</button>
                  <a th:if="${canCreate}" target="_blank" class="btn btn-space btn-primary" th:href="|${baseUrl}/app/entity/form?e=${entityName}&after=close|">
                    <i class="icon zmdi zmdi-plus"></i> [[${bundle.L('新建')}]]
                  </a>
                </div>
              </div>
            </div>
            <div id="react-list" class="rb-loading rb-loading-active data-list">
              <th:block th:replace="~{/_include/spinner}" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <th:block th:replace="~{/_include/footer}" />
    <script>
      window.__PageConfig = {
        type: 'RecordSearchList',
        entity: ['[[${entityName}]]', '[[${entityLabel}]]', '[[${entityIcon}]]'],
        listConfig: [(${DataListConfig})],
        advFilter: false,
        protocolFilter: '[[${referenceFilter}]]',
        forceOpenNewtab: true,
      }
    </script>
    <th:block th:replace="~{/_include/forms}" />
    <script th:src="@{/assets/js/general/rb-datalist.js}" type="text/babel"></script>
    <script type="text/babel">
      RbList.renderAfter = function () {
        parent && parent.referenceSearch__dlg && parent.referenceSearch__dlg.resize()
      }

      $(document).ready(() => {
        $('.J_select').on('click', () => {
          const ids = RbListPage._RbList.getSelectedIds()
          if (ids.length > 0 && parent && parent.referenceSearch__call) parent.referenceSearch__call(ids)
        })

        // 新建后自动刷新
        window.addEventListener('storage', (e) => {
          if (e.key === 'referenceSearch__reload') {
            localStorage.removeItem('referenceSearch__reload')
            RbListPage.reload()
          }
        })
      })
    </script>
  </body>
</html>
